<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>22001010205白博文-我的页面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/goods.css">
    <link rel="stylesheet" href="./css/tabbar.css">
    <link rel="stylesheet" href="./css/wode.css">
</head>
<body>
    <div class="bai_header">
        <img src="./img/avatar.jpg" class="bai_header_avatar"/>
        <div class="bai_header_info">
            <span class="bai_header_info_name">白博文</span>
            <span class="bai_header_info_address">大连东软信息学院</span>
        </div>
        <div class="bai_header_area">
            <div class="bai_header_area_button1">免单返现金</div>
            <div class="bai_header_area_button2">
                <a href="./shezhi.html">设置</a>
            </div>
        </div>
    </div>
    <div class="bai_nav">
            <span class="bai_nav_title">省钱月卡</span>
            <span class="bai_nav_text">开通领124元优惠券</span>
    </div>
    <div class="bai_bar">
        <div class="bai_bar_nav">
            <span class="bai_bar_nav_title">我的订单</span>
            <span class="bai_bar_nav_text">查看全部 ></span>
        </div>
        <div class="bai_bar_nav_icon">
            <div class="bai_bar_nav_icon_item">
                <span class="iconfont icon-youhuiquan"></span>
                <div class="bai_bar_nav_icon_item_text">优惠券</div>
            </div>
            <div class="bai_bar_nav_icon_item">
                <span class="iconfont icon-xiai"></span>
                <div class="bai_bar_nav_icon_item_text">商品收藏</div>
            </div>
            <div class="bai_bar_nav_icon_item">
                <span class="iconfont icon-jiaoyin"></span>
                <div class="bai_bar_nav_icon_item_text">历史浏览</div>
            </div>
            <div class="bai_bar_nav_icon_item">
                <span class="iconfont icon-tuikuan"></span>
                <div class="bai_bar_nav_icon_item_text">退款售后</div>
            </div>
            <div class="bai_bar_nav_icon_item">
                <span class="iconfont icon-weizhi"></span>
                <div class="bai_bar_nav_icon_item_text">收货地址</div>
            </div>
        </div>
    </div>
    <div class="bai_goods"></div>
    <div class="bai-tabbar">
        <a href="./index.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-shouye"></span>
                <span class="bai-tabbar-item-text">首页</span>
            </section>
        </a>
        <a href="./12.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-1212"></span>
                <span class="bai-tabbar-item-text">12.12</span>
            </section>
        </a>
        <a href="./liaotian.html">
            <section class="bai-tabbar-item">
                <span class="iconfont icon-chat"></span>
                <span class="bai-tabbar-item-text">聊天</span>
            </section>
        </a>
        <a href="./wode.html">
            <section class="bai-tabbar-item" style="color: #e3685c;">
                <span class="iconfont icon-gerenzhongxin-zhihui"></span>
                <span class="bai-tabbar-item-text">我的</span>
            </section>
        </a>
    </div>
</body>
<script>
     const goods = document.querySelector('.bai_goods');
     const renderHtml = (data) => {
        goods.innerHTML = data.map((item)=>{
            return(
                `
                 <div class="bai_goods_item">
            <img src=${item.img} class="bai_goods_item_img"/>
            <p class="bai_goods_item_title">${item.title}</p>
            <div class="bai_goods_item_content">
                <span class="bai_goods_item_content_price">¥${item.price}</span>
                <span class="bai_goods_item_content_quantity">已抢${item.quantity}</span>
            </div>
        </div>
                `
            );
        }).join("");
    }
     const getData = async () =>{
        let resp = await fetch('http://localhost:3000/goods1');
        let result = await resp.json();
        renderHtml(result);
        
    }
    getData();
    
   
    
</script>
</html>